import { createContext, useState } from 'react'
import { Row, Col, Menu, Button } from 'antd'
import {
  MailOutlined,
  AppstoreOutlined,
  SettingOutlined,
} from '@ant-design/icons'

// import PC from '../reposive/pc'
// import Mobile from '../reposive/mobile'

// import ParentCategory from './parent-category'
// import Cards from './cards'
// import ChildCategory from './child-category'
// import Filter from './filter'
// import HCenter from '@/components/utils/h-center'

import '@/styles/common.css'

export const Context = createContext()

const { SubMenu } = Menu

const MainContent = () => {
  const [flagShowFilterContent, setFlagShowFilterContent] = useState(true)
  const [current, setCurrent] = useState('mail')

  const handleClick = (e) => {
    console.log('click ', e)
    setCurrent({ current: e.key })
  }

  return (
    <>
      <Context.Provider
        value={{ flagShowFilterContent, setFlagShowFilterContent }}
      >
        <Menu
          theme="light"
          onClick={handleClick}
          selectedKeys={[current]}
          mode="horizontal"
        >
          <Menu.Item key="ParentCategory" icon={<MailOutlined />}>
            <Button>ParentCategory</Button>
          </Menu.Item>
          <Menu.Item key="All" icon={<MailOutlined />}>
            All
          </Menu.Item>
          <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
            Navigation Two
          </Menu.Item>
          <SubMenu
            key="SubMenu"
            icon={<SettingOutlined />}
            title="Navigation Three - Submenu"
          >
            <Menu.ItemGroup title="Item 1">
              <Menu.Item key="setting:1">Option 1</Menu.Item>
              <Menu.Item key="setting:2">Option 2</Menu.Item>
            </Menu.ItemGroup>
            <Menu.ItemGroup title="Item 2">
              <Menu.Item key="setting:3">Option 3</Menu.Item>
              <Menu.Item key="setting:4">Option 4</Menu.Item>
            </Menu.ItemGroup>
          </SubMenu>
          <Menu.Item key="alipay">
            <a href="" target="_blank" rel="noopener noreferrer">
              Navigation Four - Link
            </a>
          </Menu.Item>
          <Menu.Item key="Filter" icon={<MailOutlined />}>
            <Button>Filter</Button>
          </Menu.Item>
        </Menu>
      </Context.Provider>
    </>
  )
}

export default MainContent
